<template>
  <div class="bg">
      <div class="container" style="height:100%">
          <div class="row">
              <div class="col-12 col-sm-9 col-md-7 col-lg-5 m-auto pt-5">
                  <div class="card mt-5">
                      <div class="card-header">
                          <h3 class="text-center" style="color:#fff">Admin</h3>
                      </div>
                      <div class="card-body">
                          <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
                              <el-form-item prop="username">
                                  <el-input placeholder="输入用户名称" prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
                              </el-form-item>
                              <el-form-item prop="password">
                                  <el-input placeholder="请输入密码" prefix-icon="iconfont icon-3702mima" type="password" v-model="loginForm.password"></el-input>
                              </el-form-item>
                              <el-form-item class="btns">
                                  <el-button type="primary" @click="login">登录</el-button>
                                  <el-button type="info" @click="reset">重置</el-button>
                              </el-form-item>
                          </el-form>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return{
            loginForm:{
                username:'',
                password:''
            },
            loginFormRules:{
                username:[
                    {required:true, message:'请输入用户名称', trigger:'blur'},
                    {min:3, max:10, message:"长度在3到10个字符", trigger:'blur'}
                ],
                password:[
                    {required:true, message:'请输入密码', trigger:'blur'},
                    {min:3, max:15, message:'密码长度在6到15字符', trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        login() {
            // axios请求占坑
            this.$router.push('/home')
        },
        reset() {
            
            // this.$message.info('重置成功')
            if(this.loginForm.username || this.loginForm.password != ""){
                this.$refs.loginFormRef.resetFields()
                this.$message.info('重置成功')
            }
        }
    }

}
</script>

<style scoped>
.btns {
    display: flex;
    justify-content: space-between;
}
.card {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 10px 10px 5px #2D4A31;
    border-radius: 4%;
}
.bg {
    background: url('../assets/bg.jpg') no-repeat;
    background-size: 100% 100%;
    z-index: -200;
    height: 100%;
}
</style>